<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Login and Register App</title>
    <!-- 引入 Vue 2.6.14，这里使用 CDN 示例，你也可以使用本地文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <!-- 引入 Vue Router，同样可根据实际情况选择 CDN 或本地文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
</head>

<body>
<div id="app">
    <router-view></router-view>
</div>
<script>
    // 定义登录组件
    const LoginComponent = {
        template: `
                <div>
                    <h2>登录</h2>
                    <form @submit.prevent="login">
                        <input type="text" v-model="username" placeholder="用户名"><br>
                        <input type="password" v-model="password" placeholder="密码"><br>
                        <button type="submit">登录</button>
                    </form>
                    <div v-if="errorMessage">{{ errorMessage }}</div>
                </div>
            `,
        data() {
            return {
                username: '',
                password: '',
                errorMessage: ''
            };
        },
        methods: {
            async login() {
                try {
                    // 使用axios发送POST请求到后端登录接口，替换之前的fetch
                    const response = await axios({
                        method: 'POST',
                        url: 'http://localhost:8080/login',
                        data: {
                            username: this.username,
                            password: this.password
                        },
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });
                    const result = response.data;
                    if (result.success) {
                        // 登录成功后的逻辑，比如跳转到用户主页（这里简化示例，暂未实际跳转）
                        console.log('登录成功');
                    } else {
                        this.errorMessage = result.message;
                    }
                } catch (error) {
                    console.error('登录出错:', error);
                    this.errorMessage = '网络错误，请稍后重试';
                }
            }
        }
    };

    // 定义注册组件
    const RegisterComponent = {
        template: `
          <div>
            <h2>注册</h2>
            <form @submit.prevent="register">
              <input type="text" v-model="username" placeholder="用户名">
              <input type="password" v-model="password" placeholder="密码">
              <input type="email" v-model="email" placeholder="邮箱">
              <button type="submit">注册</button>
            </form>
            <div v-if="errorMessage">{{ errorMessage }}</div>
          </div>
        `,
        data() {
            return {
                username: '',
                password: '',
                email: '',
                errorMessage: ''
            };
        },
        methods: {
            async register() {
                try {
                    // 使用axios发送POST请求到后端注册接口
                    const response = await axios({
                        method: 'POST',
                        url: 'http://localhost:8080/register',
                        data: {
                            username: this.username,
                            password: this.password,
                            email: this.email
                        },
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    });
                    const result = response.data;
                    if (result.success) {
                        // 注册成功后逻辑，比如提示并跳转到登录页（简化示例未实际跳转）
                        console.log('注册成功');
                    } else {
                        this.errorMessage = result.message;
                    }
                } catch (error) {
                    console.error('注册出错:', error);
                    this.errorMessage = '网络错误，请稍后重试';
                }
            }
        }
    };

    // 配置路由
    const router = new VueRouter({
        routes: [
            { path: '/login', component: LoginComponent },
            { path: '/register', component: RegisterComponent }
        ]
    });

    // 创建 Vue 实例并挂载路由
    const app = new Vue({
        el: '#app',
        router
    });
</script>
</body>

</html>